<script setup>

    let list = [
        { title: '【解读】什么是公益性岗位?快来了解一下吧!', date: '2022-11-20' },
        { title: '枣庄市公益岗优秀工作人员名单公示', date: '2022-11-13' },
        { title: '今年山东要增加40万的公益岗,到底是什么？', date: '2022-10-29' },
        { title: '公益岗可以直接转为事业编制吗?', date: '2022-09-25' },
        { title: '备考公务员公益性岗位值得去吗?', date: '2022-05-29' },
        { title: '公益岗,小切口改善大民生', date: '2022-04-07' },
    ]

</script>

<template>
    <div class="right-message-wrap card-box mt10">
        <div class="card-title"><div class="title">工作通知</div></div>

        <el-scrollbar class="message-list">
            <div class="item flex-center"
                v-for="(item, index) in list"
                :key="index"
            >
                <div class="index">{{ index + 1 }}</div>
                <div class="title">{{ item.title }}</div>
                <div class="date">{{ item.date }}</div>
            </div>
        </el-scrollbar>
    </div>
</template>

<style lang="less" scoped>
    .right-message-wrap{
        height: 252px;

        .message-list{
            height: 210px;
            padding: 15px;

            .item{
                color: #fff;
                font-size: 14px;
                padding: 8px 0;
                cursor: pointer;

                &:hover{
                    color: #00A4FF;
                }

                .index{
                    width: 20px;
                    text-align: center;
                }

                .title{
                    flex: 1;
                    margin: 0 20px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .date{
                    width: 100px;
                }
            }
        }
    }
</style>